<template>
  <div class="habit">
    <div class="add-habit">
    <form v-on:submit.prevent="addNewHabit">
      <label for="new-habit">Add a habit</label>
      <input
        v-model="newHabitText"
        id="new-habit"
        placeholder="E.g. Feed the cat"
      >
      <button>Add</button>
    </form>
    </div>
    <div>
      <ul class="habit-list">
      <li
      v-for="(habit, index) in habits" :class="{active:habit.isActive}"
      v-bind:key="habit.id"
      v-bind:title="habit.title"
      v-on:remove="habits.splice(index, 1)"
      @click="activeFun(habit)"
      >
      <span @click="setCount(habit.id)" v-show="today !== habit.today" >{{habit.title}}</span>
      <span @click="setCount(habit.id)" v-show="today===habit.today" >{{habit.title}}</span>
      <em>{{habit.count}}天/共坚持<button class="delete" @click="deleteLocalHabits(index)">删除</button></em>
      </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
    name:"list",
    data(){
      return{
        newHabitText: '',
        habits: [
            {
                id: 0,
                title: 'running',
                createTime: this.getToday(),
                count: 0
            }
        ],
        nextHabitId: 1,
        today:this.getToday()
      }

    },
    methods: {
    addNewHabit: function () {
      const time = Date.now()
      this.habits.push({
        id: this.nextHabitId++,
        title: this.newHabitText,
        count: 0,
        createTime: time,
        today: ''
      })
      this.newTodoText = ''
      this.nextHabitId++
    },
    activeFun: function(data){
        this.todos.forEach(function(obj){
            obj.isActive = false;
        });
        data.isActive = !data.isActive;
    },
    setCount(id){
        const obj=this.habits.find((obj)=>{
            return obj.id===id
        })
        if(obj.today!==this.getToday()){
            obj.count++
            obj.today=this.getToday()
        }
    },
    getToday(){
      const date=new Date()
      return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
    },
    deleteLocalHabits(index){

      // if(confirm('确定删除吗？')){

      this.habits.splice(index,1)

      // }

      },
  },
};
</script>

<style scoped>
.habit{
  width: 100%;
  height: 100%;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.301);
  font-size: 18px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  box-shadow: darkgray;
}
.add-habit{
  position: relative;
  width: 100%;
  height: 50px;
}
.habit-list{
  width: 100%;
  position: relative;
  list-style-type: none;
  margin: 50px 0;
  padding: 0;
}
.habit-list li{
  list-style-type: none;
  padding: 8px 0px 5px 0px;
  height: 30px;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  user-select: none;
}
.active{
  background-color: darkgray;
}
.list li span.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left center;
  text-indent: 60px;
  cursor: pointer;
}
.habit-list li em {
  float: right;
  font-style: normal;
}

.habit-list li .delete {
  border: 0;
  background-color: transparent;
  width: 50px;
}
</style>
